import { FC } from 'react';
import styles from './index.module.scss';
import EditorCanvas from './EditorCanvas';
import { useEditorData } from '@/hooks/useEditorData';
import { useEditorStore } from '@/store/editor';
import LeftPanel from './LeftPanel';
import RightPlanel from './rightPanel';
import EditorHeader from './EditorHeader';

const Editor: FC = () => {
  useEditorData();
  const { select } = useEditorStore();
  const clearSelect = () => select('');

  const main = (
    <div className={styles.canvas}>
      <EditorCanvas />
    </div>
  );

  return (
    <div className={styles.container}>
      <EditorHeader />

      <div className={styles['contant-wrapper']}>
        <div className={styles.left}>
          <LeftPanel />
        </div>

        <div className={styles.main} onClick={clearSelect}>
          {main}
        </div>

        <div className={styles.right}>
          <RightPlanel />
        </div>
      </div>
    </div>
  );
};

export default Editor;
